<template>
  <h1>表格组件</h1>
  <el-table :data="list" border style="width: 600px;margin: 0 auto">
    <el-table-column type="index" label="编号" width="83" align="center"></el-table-column>
    <el-table-column prop="name" label="姓名" align="center"></el-table-column>
    <el-table-column prop="price" label="商演价格" width="83" align="center"></el-table-column>
    <el-table-column prop="job" label="职业" align="center"></el-table-column>
    <el-table-column prop="age" label="年龄" align="center"></el-table-column>
    <el-table-column label="操作" align="center">
      <!-- 自定义列模版template -->
      <!-- #default 定义了一个插槽(slot)名为default
      scope就是一个对象,该对象是一个范围对象,可保存上下文数据-->
      <template #default="scope">
        <!-- scope对象保存了当前行数据的索引$index(从0开始)与当前行完整的对象scope.row -->
        <el-button type="danger" @click="dele(scope)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
import {ref} from "vue";

const list = ref([
  {name: "黄霄雲", price: 1000, job: "歌手", age: 24},
  {name: "孙雪宁", price: 10000, job: "演员", age: 25},
  {name: "李庚希", price: 42042, job: "演员", age: 25},
  {name: "刘浩存", price: 12144, job: "演员", age: 25},
  {name: "单依纯", price: 4277, job: "歌手", age: 23},
  {name: "关晓彤", price: 4277, job: "演员", age: 26},
]);

const dele= (obj) => {
  console.log(obj);
  console.log(obj.$index);
  if (confirm("你确定要删除"+obj.row.name+"吗？")){
    list.value.splice(obj.$index, 1);
  }
};
</script>
<style scoped>

</style>